<template>
  <div style="padding-top: 40vh">
    <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-item label="账号" >
        <a-input v-model:value="modelRef.phone" placeholder="请输入账号" />
      </a-form-item>
      <a-form-item label="密码" >
        <a-input v-model:value="modelRef.password" type="password" placeholder="请输入密码" />
      </a-form-item>
      <a-form-item class="error-infos" :wrapper-col="{ span: 16, offset: 4 }" >
        <a-button type="primary" @click.prevent="login">登陆</a-button>
      </a-form-item>
    </a-form>
  </div>

</template>
<script>
import {post} from '../../api/api.js';
import { JSEncrypt } from 'jsencrypt';
import { reactive, toRaw, defineComponent } from 'vue';
import { message } from 'ant-design-vue';
import { useRouter } from "vue-router";
export default defineComponent({
  setup() {
    const router = useRouter()
    const modelRef = reactive({
      phone: '',
      password: ''
    });

    const login = () => {
      let toRaw1 = toRaw(modelRef);

      if (toRaw1.phone === 'ryr' && toRaw1.password === 'ryr') {
        localStorage.setItem('X-SEER-AUTH', 'ryr')
        message.success('登录成功!');
        router.push('/home/index')
      } else {
        message.error('用户名或密码错误!');
      }

      // let accountUser = {
      //   phone: encryption(toRaw1.phone),
      //   password: encryption(toRaw1.password)
      // }

      // post("/auth/login", accountUser).then((res) =>{
      //   if (res) {
      //     localStorage.setItem('X-SEER-AUTH', res.token)
      //     message.success('登录成功!');
      //     router.push('/home')
      //   } else {
      //     message.error('用户名或密码错误!');
      //   }
      // }).catch((error) =>{
      //   message.error('用户名或密码错误!');
      // });

    };

    const encryption = (password) => {
      let encrypt = new JSEncrypt();
      encrypt.setPublicKey("123");
      return encrypt.encrypt(password);
    }

    return {
      labelCol: {
        span: 8,
      },
      wrapperCol: {
        span: 8,
      },
      modelRef,
      login
    };
  },
});
</script>
<style lang="less" scoped>
.error-infos :deep(.ant-form-explain) {
  white-space: pre-line;
}
</style>